<template>
  <div class="head">
    <div class="left">
      <span>网易云音乐</span>
      <div class="iconleft">
        <i class="el-icon-arrow-left" style="color:azure;line-height: 25px;"></i>
      </div>
      <div class="iconright">
        <i class="el-icon-arrow-right" style="color:azure;line-height: 25px;"></i>
      </div>
      <input @keydown="keydown" type="text" placeholder="搜索" @focus="onfocus" @blur="onblur" v-model.trim="input" @input="Contentchange">
    </div>
    <div class="rigth">
      <div v-if="loginType==1">
        <img :src="imgurl" alt="##">
        <span>{{nickname}}
          <i class="el-icon-caret-bottom"></i>
        </span>
      </div>
      <div @click="getlogin" v-else>
        <img src="@/assets/disc.png" alt="#">
        <span>未登录
          <i class="el-icon-caret-bottom"></i>
        </span>
      </div>

    </div>
    <div style="position:absolute;top:52px;z-index:99999;left:292px;" v-show="show">
      <el-row>
        <el-col>
          <el-card class="card" shadow="always" style="" v-if="Searchswitching">
            <span style="margin-top:-50px;font-size: 15px;opacity: 0.5;">热搜榜</span>
            <div class="sasuobang" v-for="(item,index) in SearchListDetailed" :key="index">
              <div style="display:flex;align-items: center;">
                <p class="span2" :class="index<3?'p':''">{{index+1}}</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <p class="span1" :class="index<3?'b':''">{{item.searchWord}}<span style="margin-left:10px;opacity:0.3;">{{item.score}}</span></p>
              </div>
              <p style="margin-left:10px;opacity:0.3;font-size: 8px;margin-top: -10px;margin-left: 45px;">{{item.content}}</p>
            </div>

          </el-card>
          <div v-else style="" class="searchbox">
            <div v-if="albums!=undefined||artists!=undefined||playlists!=undefined||songs!=undefined">
              <div style="margin-top:2px;margin-left:5px">
                <span class="span1">搜<span style="color:blue;font-size: 10px;">"{{input}}"</span>的结果></span>
              </div>
              <!-- 单曲 -->
              <div class="singlesong">
                <div style="font-size:10px;opacity: 0.7;background-color: rgb(243, 241, 241);padding:5px 0;">
                  <i class="iconfont icon-yinle" style="margin-right:5px;font-size: 8px;margin-left: 5px;"></i><span>单曲</span>
                </div>
                <div class="singlesonglist" v-for="item in songs" :key="item.id">
                  <div class="span5">
                    <span>{{item.name}}&nbsp;-</span>&nbsp;<span v-for="(item2,index2) in item.artists" :key="index2" style="opacity:0.5;">{{item2.name}}</span>
                  </div>
                </div>
              </div>
              <!-- 歌手 -->
              <div class="singlesong">
                <div style="font-size:10px;opacity: 0.7;background-color: rgb(243, 241, 241);padding:5px 0;">
                  <i class="iconfont icon-renwu-ren" style="margin-right:5px;font-size: 8px;margin-left: 5px;"></i><span>歌手</span>
                </div>
                <div class="singlesonglist" v-for="item1 in artists" :key="item1.id">
                  <div class="span5">
                    <span>{{item1.name}}</span>
                  </div>
                </div>
              </div>
              <!-- 专辑 -->
              <div class="singlesong">
                <div style="font-size:10px;opacity: 0.7;background-color: rgb(243, 241, 241);padding:5px 0;">
                  <i class="iconfont icon-zhuanji" style="margin-right:5px;font-size: 8px;margin-left: 5px;"></i><span>专辑</span>
                </div>
                <div class="singlesonglist" v-for="item in albums" :key="item.id">
                  <div class="span5">
                    <span>{{item.name}}&nbsp;-&nbsp;</span><span style="opacity:0.5;">{{item.artist.name}}</span>
                  </div>
                </div>
              </div>
              <!-- 歌单 -->
              <div class="singlesong">
                <div style="font-size:10px;opacity: 0.7;background-color: rgb(243, 241, 241);padding:5px 0;">
                  <i class="iconfont icon-songlist" style="margin-right:5px;font-size: 8px;margin-left: 5px;"></i><span>歌单</span>
                </div>
                <div class="singlesonglist" v-for="item in playlists" :key="item.id">
                  <div class="span5">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <el-empty description="没有搜索的结果"></el-empty>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'Head',
  data() {
    return {
      input2: '',
      //从本地存储拿到昵称直接渲染到页面
      nickname: '',
      //从本地存储拿到头像直接渲染到页面
      imgurl: '',
      //本地存储有loginType并把这个值赋值为1，这样就可以显示昵称和头像
      loginType: '',
      show: false,
      input: '',
      //存储定时器
      throttleId: '',
      //定时器的时间
      delay: 1000,
      //控制热搜和搜索建议的切换
      Searchswitching: true,
      //专辑
      albums: [],
      //歌手
      artists: [],
      //歌单
      playlists: [],
      //单曲
      songs: []
    }
  },
  computed: {
    ...mapState({
      //登录成功获取个人昵称和头像
      informationlist: state => state.Home.informationlist.profile.avatarUrl,
      Loginaccount: state => state.Home.informationlist.profile.nickname,
      SearchListDetailed: state => state.search.SearchListDetailed,
      //搜索建议
      Searchresult: state => state.search.Searchresult
    })
  },
  methods: {
    getdsdiuhui() {
      console.log(1)
    },
    getlogin() {
      Bus.$emit('passbyvalue', 1)
    },
    //搜索的键盘事件
    keydown(event) {
      if (event.keyCode == 13) {
        this.$router.push({ path: '/home/Searchpanel', query: { keywords: this.input } })
      }
    },
    //搜索获得焦点
    onfocus() {
      this.show = true
    },
    //搜索失去焦点
    onblur() {
      this.show = false
    },
    //当搜索框内容变化时
    Contentchange() {
      //调用防抖函数
      this.throttle()
      if (this.input == '') {
        this.Searchswitching = true
      }
      if (this.input != '') {
        this.Searchswitching = false
      }
    },
    //防抖函数
    throttle() {
      if (this.throttleId) {
        clearInterval(this.throttleId)
      }
      this.throttleId = setTimeout(() => {
        this.$store.dispatch('getSearchsuggestionsList', { keywords: this.input })
      }, this.delay)
    }
  },
  created() {
    //从login组件获取到个人信息昵称和头像渲染到页面上去
    Bus.$on('transmitlist', (nickname, imgurl, loginType) => {
      setTimeout(() => {
        this.nickname = nickname
        this.imgurl = imgurl
        this.loginType = loginType
      }, 500)
    })
  },
  mounted() {
    this.$store.dispatch('getHotSearchListDetailed')
    this.nickname = localStorage.getItem('nickname')
    this.imgurl = localStorage.getItem('avatarUrl')
    this.loginType = localStorage.getItem('loginType')
  },
  watch: {
    Searchresult: {
      handler(v, o) {
        this.albums = v.albums
        this.artists = v.artists
        this.playlists = v.playlists
        this.songs = v.songs
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  height: 70px;
  background-color: rgb(245, 66, 66);
  display: flex;
  align-items: center;
  .left {
    flex: 5;
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
      color: #fff;
      font-size: 20px;
    }
    .iconleft {
      width: 25px;
      height: 25px;
      border-radius: 50px;
      background-color: rgb(0, 0, 0);
      opacity: 0.2;
      margin-left: 100px;
      display: flex;
      justify-content: center;
    }
    .iconright {
      width: 25px;
      height: 25px;
      border-radius: 50px;
      background-color: rgb(0, 0, 0);
      opacity: 0.2;
      margin-left: 10px;
      line-height: 20px;
      display: flex;
      justify-content: center;
    }
    input {
      border-radius: 25px;
      background-color: black;
      opacity: 0.2;
      height: 30px;
      width: 170px;
      margin-left: 10px;
      outline: none; //文本框去除效果;
      color: #fff;
    }
  }
  .rigth {
    flex: 2;
    display: flex;
    align-items: center;
    div {
      display: flex;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 25px;
    }
    span {
      color: rgb(206, 205, 205);
      font-size: 12px;
      margin-left: 8px;
    }
    span:hover {
      color: #fff;
    }
  }
  .rigth:hover {
    cursor: pointer;
  }
  .card {
    width: 350px;
    height: 500px;
    overflow: auto;
    .sasuobang {
      .span1 {
        padding: 20px 10px;
        font-size: 12px;
        font-weight: 500;
      }
      .span2 {
        font-size: 12px;
        opacity: 0.4;
      }
      .p {
        color: red;
        opacity: 0.8;
      }
      .b {
        font-weight: 700;
      }
    }
    .sasuobang:hover {
      background-color: rgb(240, 239, 238);
      cursor: pointer;
    }
  }
  .card::-webkit-scrollbar {
    display: none;
  }
  .searchbox {
    width: 350px;
    height: 500px;
    overflow: auto;
    background-color: #fff;
    border-radius: 5px;
    .span1 {
      font-size: 8px;
      opacity: 0.5;
      margin-top: -20px;
    }
    .span1:hover {
      cursor: pointer;
      opacity: 0.8;
    }
    .singlesong {
      .singlesonglist {
        .span5 {
          font-size: 13px;
          opacity: 0.8;
          padding-left: 30px;
          padding-top: 5px;
          padding-bottom: 5px;
        }
        .span5:hover {
          cursor: pointer;
          background-color: aliceblue;
        }
      }
    }
  }
  .searchbox::-webkit-scrollbar {
    display: none;
  }
}
</style>
<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>